<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="position: relative;width: 800px;height:600px;top: 20%;left:20%;background-color: #100C2A;">
    </div>
</body>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="application/javascript">
    var myChart = echarts.init(document.getElementById('main'), 'dark');
    $.get(
        "./data.json",
        function (_rawData) {
            run(_rawData);
        }
    );
    function run(_rawData) {
        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
        const countries = [
            'Finland',
            'France',
            'Germany',
            'Iceland',
            'Norway',
        ];
        // 半透明颜色值
        const colorArr1 = {
            'Finland': "rgba(73, 146, 255, .5)",
            'France': "rgba(124, 255, 178, .5)",
            'Germany': "rgba(253, 221, 96, .5)",
            'Iceland': "rgba(255, 110, 118, .5)",
            'Norway': "rgba(88, 217, 249, .5)",
        };
        // 全透明颜色值
        const colorArr2 = {
            'Finland': "rgba(73, 146, 255, 0)",
            'France': "rgba(124, 255, 178, 0)",
            'Germany': "rgba(253, 221, 96, 0)",
            'Iceland': "rgba(255, 110, 118, 0)",
            'Norway': "rgba(88, 217, 249, 0)",
        };
        const datasetWithFilters = [];
        const seriesList = [];
        countries.forEach(country => {
            var datasetId = 'dataset_' + country;
            datasetWithFilters.push({
                id: datasetId,
                fromDatasetId: 'dataset_raw',
                transform: {
                    type: 'filter',
                    config: {
                        and: [
                            { dimension: 'Year', gte: 1951 },
                            { dimension: 'Country', '=': country }
                        ]
                    }
                }
            });
            seriesList.push({
                type: 'line',
                datasetId: datasetId,
                showSymbol: false,
                name: country,
                endLabel: {
                    show: true,
                    formatter: function (params) {
                        return params.value[3] + ': ' + params.value[0];
                    }
                },
                markPoint: {
                    data: [{ name: '特殊值', xAxis: '1990', yAxis: '43296', value: '43296' }],
                    symbol: "pin"
                },
                labelLayout: {
                    moveOverlap: 'shiftY'
                },
                emphasis: {
                    focus: 'series'
                },
                encode: {
                    x: 'Year',
                    y: 'Income',
                    label: ['Country', 'Income'],
                    itemName: 'Year',
                    tooltip: ['Income']
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: colorArr1[country],
                        },
                        {
                            offset: 1,
                            color: colorArr2[country],
                        },
                    ]),
                }
            });
        })
        console.log(_rawData);
        option = {
            animationDuration: 10000,
            dataset: [
                {
                    id: 'dataset_raw',
                    source: _rawData
                },
                ...datasetWithFilters
            ],
            title: {
                text: 'Income of Germany and France since 1950'
            },
            tooltip: {
                order: 'valueDesc',
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                nameLocation: 'middle'
            },
            yAxis: {
                name: 'Income'
            },
            grid: {
                right: 140
            },
            series: seriesList
        };
        myChart.setOption(option);
    }
</script>

</html>